<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" class="uname">
    <span class="uname_span"></span>
    <br>
    <button disabled>注册</button>


    <script>


        var oUname = document.querySelector('.uname') ;
        var oUnameSpan = document.querySelector('.uname_span') ;
        var oBtn = document.querySelector('button') ;


        var flag1 = false ;  // 用户名
        var flag2 = false ;  // 手机号

        oUname.oninput = function() {
            
            var userName = this.value ;
            // 判断为空
            if(/^.{0}$/.test(userName)) {
                oUnameSpan.innerHTML = '输入不能为空' ;
                oUnameSpan.style.color = 'red' ;
                flag1 = false ;
                oBtn.disabled = true ;
                return  ;
            }
            // 数字开头
            if(/^\d/.test(userName)) {
                oUnameSpan.innerHTML = '数字不能开头' ;
                oUnameSpan.style.color = 'red' ;
                flag1 = false ;
                oBtn.disabled = true ;
                return ;
            }
            // 长度
            if(!/^.{6,12}$/.test(userName)) {
                console.log(2);
                oUnameSpan.innerHTML = '长度必须是6-12位' ;
                oUnameSpan.style.color = 'red' ;
                flag1 = false ;
                oBtn.disabled = true ;
                return ;
            }
            // 只能是数字，字母，下划线
            if(/\W/.test(userName)) {
                oUnameSpan.innerHTML = '必须是字母，数字，下划线' ;
                oUnameSpan.style.color = 'red' ;
                flag1 = false ;
                oBtn.disabled = true ;
                return ;
            }
            oUnameSpan.innerHTML = '√' ;
            oUnameSpan.style.color = 'green' ;

            flag1 = true ;

            if(flag1 && flag2) {
                oBtn.disabled = false ;
            }
        }



    </script>
    
</body>
</html>